<template>
	<view class="active">
		<u-navbar :is-back="true" :border-bottom="false" back-icon-color="#444444">
			<view class="slot-wrap">
				<view class="nav_center single-omit">
					<text v-if="!showSearch">做志愿</text>
					<u-search v-else placeholder="请输入关键字" action-text="取消" @custom="showSearch=false">
					</u-search>
				</view>
			</view>
			<view class="navbar-right" slot="right">
				<u-icon v-show="!showSearch" name="search" size="30" color="#666666" @click="showSearch=true"></u-icon>
				<text class="iconfont iconditu" @click="toActiveMap"></text>
			</view>
		</u-navbar>

		<view class="filter-box">
			<u-dropdown menu-icon="arrow-down-fill">
				<u-dropdown-item v-model="activeVal" :title="activeTitle" :options="activeOpt" @change="handleActiveChange"></u-dropdown-item>
				<u-dropdown-item v-model="areaVal" :title="areaTitle" :options="areaOpt" @change="handleAreaChange"></u-dropdown-item>
				<u-dropdown-item v-model="serviceVal" :title="serviceTitle" :options="serviceOpt" @change="handleServiceChange"></u-dropdown-item>
			</u-dropdown>
			<view class="sort-box">
				<u-button :style="{color: sortIndex===0?'#EB4D3C':'#666666'}" :throttle-time="0" @click="sortIndex=0">按发布日期排序</u-button>
				<u-button :style="{color: sortIndex===1?'#EB4D3C':'#666666'}" :throttle-time="0" @click="sortIndex=1">按报名热度排序</u-button>
				<u-button :style="{color: sortIndex===2?'#EB4D3C':'#666666'}" :throttle-time="0" @click="sortIndex=2">按位置最近排序</u-button>
			</view>
		</view>

		<view class="list">
			<view v-for="(item, index) in list" :key="item.activeCode">
				<activity-item :info="item"></activity-item>
				<u-line color="#E1E1E1" v-if="index != list.length - 1" />
			</view>
		</view>
	</view>
</template>

<script>
	import ActivityItem from "@/components/ActivityItem.vue"

	export default {
		components: {
			ActivityItem
		},
		data() {
			return {
				list: [],
				showSearch: false,
				activeVal: 0,
				activeTitle: "全部活动",
				activeOpt: [{
					label: '全部活动',
					value: 0,
				}, {
					label: '可报名',
					value: 1,
				}, {
					label: '公示中',
					value: 2,
				}, {
					label: '已结束',
					value: 3,
				}, {
					label: '已结项',
					value: 4,
				}],
				areaVal: 0,
				areaTitle: "全部区域",
				areaOpt: [],
				serviceVal: 0,
				serviceTitle: "服务类别",
				serviceOpt: [],
				sortIndex: -1,
			}
		},
		methods: {
			toActiveMap() {
				// this.navigateTo({
				// 	url:"",
				// })
			},
			handleActiveChange(value) {
				this.activeTitle = this.activeOpt[value].label
			},
			handleAreaChange(value) {
				console.log(value)
			},
			handleServiceChange(value) {
				console.log(value)
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/commom/styles/icons.css";

	.active {
		/deep/.u-slot-content {
			display: flex;
			justify-content: center;

			.slot-wrap {
				max-width: 600rpx;
				font-size: 32rpx;
				font-weight: 400;
				line-height: 88rpx;
				color: #333333;
			}
		}

		.navbar-right {
			display: flex;
			align-items: center;
			margin-right: 30rpx;

			.iconditu {
				margin-left: 26rpx;
				font-size: 30rpx;
				color: #333;
			}
		}

		>.filter-box {
			/deep/ .u-dropdown__menu__item {
				position: relative;

				&:not(:last-child)::after {
					content: "";
					display: block;
					position: absolute;
					right: 0;
					top: 50%;
					transform: translateY(-50%);
					width: 1px;
					height: 30rpx;
					background: #E1E1E1;
				}
			}

			/deep/ .u-icon__icon {
				color: #666666 !important;
				transform: scale(0.7) !important;
			}

			>.sort-box {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 30rpx 26rpx 20rpx 26rpx;
				background: #F4F5F6;

				/deep/ .u-btn {
					width: 220rpx;
					height: 54rpx;
					line-height: 54rpx;
					font-size: 24rpx;
				}

				/deep/ .u-default-hover {
					color: #EB4D3C !important;
					border-color: #EB4D3C !important;
					background-color: #fff !important;
				}

				/deep/ .u-hairline-border:after {
					border: none;
				}
			}
		}

		>.list {
			padding: 31rpx 34rpx 31rpx 34rpx;
			background: #fff;

		}
	}
</style>
